{extend name="public:base"}
{block name='css'}
{/block}

{block name='body'}
<style>
    .number {
        width: auto;
        height: auto;
        overflow: hidden;
        /* margin: 10px; */
        border-bottom: 1px solid #ededed;
    }   
    .number .p2 {
        width: 100%;
        overflow: hidden;
    }
    .number .p2 span.on{background:#66ba61;color:#fff;}
    .number .p2 span {
        display: inline-block;
        border: 1px solid #66ba61;
        border-radius: 2px;
        padding: 2px 13px;
        margin-right: 10px;
        font-size: 13px;
        color: #666;
    }
</style>
<div class="view view-main white-navbar white-toolbar">
    <div data-name="home" class="page">

        <div class="navbar">
            <div class="navbar-inner">
                <div class="left"><a href="{$my_prev_url|default='/'}" class="external"><i class="iconfont icon-fanhui"></i></a></div>
                <div class="center"><span>申请商家</span></div>
                <div class="right"></div>
            </div>
        </div>

        <div class="page-content padding-bottom50">

            <form name="form" action=""  method="post" id="form">
                <input type="hidden" name="id" value="{$info.id|default=0}"/>
                <div class="list inline-labels no-hairlines-md" style="margin-top:10px;">
                    <ul>
                        <li class="item-content item-input">
                            <div class="item-inner">
                                <div class="item-title item-label">商家名称</div>
                                <div class="item-input-wrap">
                                    <input type="text" name="title" value="{$info.title|default=''}" placeholder="请输入商家名称">
                                    <span class="input-clear-button"></span>
                                </div>
                            </div>
                        </li>
                        <li class="item-content item-input">
                            <div class="item-inner">
                                <div class="item-title item-label">联系人姓名</div>
                                <div class="item-input-wrap">
                                    <input type="text" name="name" value="{$info.name|default=''}" placeholder="请输入联系人姓名">
                                    <span class="input-clear-button"></span>
                                </div>
                            </div>
                        </li>
                        <li class="item-content item-input">
                            <div class="item-inner">
                                <div class="item-title item-label">手机号</div>
                                <div class="item-input-wrap">
                                    <input type="number" name="tel" value="{$info.tel|default=''}" placeholder="请输入手机号">
                                    <span class="input-clear-button"></span>
                                </div>
                            </div>
                        </li>
                        <li class="item-content item-input">
                            <div class="item-inner">
                                <div class="item-title item-label">商家地址</div>
                                <div class="item-input-wrap">
                                    <input type="text" name="address" value="{$info.address|default=''}" placeholder="请输入商家地址">
                                    <span class="input-clear-button"></span>
                                </div>
                            </div>
                        </li>
                        <li class="item-content item-input">
                            <div class="item-inner">
                                <div class="item-title item-label">品牌</div>
                                <div class="number">
                                    <p class="p2">
                                        {volist name='band_arr' id='vo'}
                                            <span data-key="{$vo.name}" class="{if $vo.check}on{/if}">{$vo.name}</span>
                                        {/volist}
                                    </p>
                                    
                                </div>
                            </div>
                        </li>
                        <input type="hidden" name="band" value="{$info.band|default=''}"  />

                        <li class="item-content item-input">
                            <div class="item-inner">
                                <div class="item-title item-label" style="line-height:80px;">营业执照</div>
                                <div class="item-input-wrap">
                                    <div class="dantu">
                                        <img src="{$info.license|default='__PUBLIC__/img/a7.png'}" class="imgs"/>
                                        <img src="__PUBLIC__/img/loading.gif"  class="img-loading"/>
                                        <input type="file" class="js-img" />
                                        <input type="hidden" name="license" value="{$info.license|default=''}" class="js-int-img" />
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="block">
                    <p class="row segmented-round">
                        <button class="col button button-big button-fill " style="background:#66ba61;">提交申请</button>
                    </p>
                </div>
            </form>

        </div>


    </div>
</div>
{/block}

{block name="js"}
<script>
    var ajaxOn = false ;
    $().ready(function () {
        $('.js-img').change(function(event){
            ajaxImgFile('.imgs', '.js-int-img', event);
        });

        $("#form").validate({
            rules: {
                merchants : "required" ,
                name : "required" ,
                tel:{
                    required : true ,
                    digits:true ,
                    min :10000000000,
                    maxlength : 11 ,
                    minlength : 11
                },
                address : "required"
            },
            messages: {
                merchants : '请输入商家名称' ,
                name : "请输入联系人姓名" ,
                tel: {
                    required : "请输入手机号" ,
                    digits:"请输入正确的手机号" ,
                    min : "请输入正确的手机号" ,
                    maxlength : "请输入正确的手机号" ,
                    minlength : "请输入正确的手机号"
                },
                address : "请输入商家地址"
            },
            showErrors: function (errorMap, errorList) {
                $.each(errorList, function (i, v) {
                    messageToast( v.message );
                    return false;
                });
            },
            onfocusout: false,
            onsubmit : true ,
            onkeyup : false ,
            onclick : false ,
            focusInvalid:false,
            submitHandler:function(form){

                if ( ! $('input[name=license]').val() ) {
                    messageToast( '请上传营业执照' );
                    return false ;
                }
                if (ajaxOn) {
                    return false ;
                }
                ajaxOn = true ;
                $.post("", $('#form').serialize(), function(data){
                    ajaxOn = false;
                    messageToast(data.info);
                    if (data.status == 'y') {
                        setTimeout(function () {
                            self.location = "{:url('business')}";
                        }, 1000);
                    }
                }, 'json');

                return false ;

            }
        });
    });
    /*
     * ajax上传图片
     * @param string imgObj 需要修改img的src属性的对象
     * @param string fileObj 需要修input值的对象
     */
    function ajaxImgFile( imgObj, inputObj, event ){
        // if(! $(inputObj).val()) return false ;
        app.dialog.preloader('上传中...');
        var files = event.target.files || event.dataTransfer.files;
        var formData = new FormData();
        formData.append('imgFile', files[0]);
        var ajax = new XMLHttpRequest();
        ajax.open("POST", "{:url('index/saveImg')}", true);
        ajax.send(formData);
        ajax.onreadystatechange = function() {
            if (ajax.readyState == 4) {
                if (ajax.status >= 200 && ajax.status < 300 || ajax.status == 304) {
                    var data = JSON.parse(ajax.responseText);
                    if (data.status == 'y') {
                        //修改img为上传后的图片地址
                        if ( imgObj ) {
                            $(imgObj).attr('src',data.data.src);
                        }
                        //给传值的input赋值
                        if ( inputObj ) {
                            $(inputObj)	.val(data.data.src);
                        }
                        var toastCenter = app.toast.create({
                            text: data.info,
                            position: 'center',
                            closeTimeout: 2000
                        });
                        toastCenter.open();
                    } else {
                        var toastCenter = app.toast.create({
                            text: data.info,
                            position: 'center',
                            closeTimeout: 2000
                        });
                        toastCenter.open();
                    }
                    app.dialog.close();
                }
            }
        }

    }
    $(".number span").click(function(){
        spec_key = '';
        $(this).toggleClass('on');
        $('.number .on').each(function(i,n){
            spec_key += '/'+$(n).attr('data-key');
        });
        $('input[name=band]').val(spec_key);
      
    });
</script>
{/block}